/**
 *
 * @authors 前端小灰狼
 * @date    2020-12-10 16:48:28
 * @version v1.0
 * @description the core js of todolist project
 *
 * ━━━━━━神兽出没━━━━━━
 * 　　   ┏┓　 ┏┓
 * 　┏━━━━┛┻━━━┛┻━━━┓
 * 　┃              ┃
 * 　┃       ━　    ┃
 * 　┃　  ┳┛ 　┗┳   ┃
 * 　┃              ┃
 * 　┃       ┻　    ┃
 * 　┃              ┃
 * 　┗━━━┓      ┏━━━┛ Code is far away from bugs with the animal protecting.
 *       ┃      ┃     神兽保佑,代码无bug。
 *       ┃      ┃
 *       ┃      ┗━━━┓
 *       ┃      　　┣┓
 *       ┃      　　┏┛
 *       ┗━┓┓┏━━┳┓┏━┛
 *     　  ┃┫┫　┃┫┫
 *     　  ┗┻┛　┗┻┛
 *
 * ━━━━━━感觉萌萌哒━━━━━━
 */

// 请根据考试说明文档中列出的需求进行作答
// 预祝各位顺利通过本次考试，see you next week！
// ...

//获取 input 
var inp = document.querySelector('#title')

//获取正在进行
var todolist = document.querySelector('#todolist')

// 给 inp 添加键盘按下事件
inp.onkeydown = function(e){
    console.log(e)
    //键盘码的兼容写法
    var keycode = e.keyCode || e.which
    if(keycode === 13){
        //在 ol下 创建 li
        var li = document.createElement('li')
        todolist.appendChild(li)
        //在 li中 创建 input 选框
        var input = document.createElement('input')
        input.type = 'checkbox'
        li.appendChild(input)
        //在 li中 创建 p 标签
        var p = document.createElement('p')
        p.innerText = this.value;
        li.appendChild(p)
        //在 li中 创建 a 标签
        var a = document.createElement('a')
        a.innerText = '-'
        a.setAttribute('href','javascript:;')
        li.appendChild(a)
        // 全部添加完成之后，输入框清空
        this.value = ''
        // 调用 计数 函数
        count()
    }
}

//获取 已经完成
var donelist = document.querySelector('#donelist')


//事件委托
click(todolist,donelist)
click(donelist,todolist)
function click(aaa,target){
    aaa.onclick = function(e){
        if(e.target.tagName === 'INPUT' && e.target.getAttribute('type') === 'checkbox'){
            target.appendChild(e.target.parentElement)
            count()
        }else if(e.target.tagName === 'P'){
            var str = '<input type="text" value="'+e.target.innerText+'">'
            e.target.innerHTML = str
            e.target.firstElementChild.onblur = function(){
                e.target.innerText = this.value
            }
        }else if(e.target.tagName === 'A'){
                e.target.parentElement.parentElement.removeChild(e.target.parentElement)
                count()
        }
        
    }
}
// 使 'todocoun'和 'donecount'的span跟 ol\ul下的length相等
function count(){
    document.querySelector('#todocount').innerText = todolist.children.length
    document.querySelector('#donecount').innerText = donelist.children.length
}

// 获取元素
const last = document.querySelector('#ipv4')
const lastO = document.querySelector('#addr')
$.ajax({
    url:'/da',
    dataType:'json',
    success(res){
        console.log(res)
        getList(res)
        getLast(res)
    }
})
function getList(res) {
    str = ''
    str += `
    <strong id="ipv4">${res.ip}</strong>
    `
    last.innerHTML = str
}
function getLast(res) {
    str = ''
    str += `
    <strong id="addr">${res.area}</strong>
    `
    lastO.innerHTML = str
}
